<!-- 赛事预览 -->
<template>
	<view class="competition">
		<view class="cptt-main">
			<view class="left">
				<image class="image" :src="cptt.url" mode=""></image>
			</view>
			<view class="right">
				<view class="right-top" @click="seeDetails">
					<text>{{ cptt.name }}</text>
					<u-button 
					:type="stateToType(cptt.state)" 
					:disabled="cptt.state === 0"
					ripple
					@click="seeDetails"
					>
						{{stateToStr(cptt.state)}}
					</u-button>
				</view>
				<view class="right-bom" v-if="cptt.time" >
					报名倒计时=>
					<u-count-down 
					:timestamp="cptt.time"
					bg-color="#eaeaea"
					font-size="28" :color="timeColor"
					show-border :border-color="timeColor"
					separator="zn" :separator-color="timeColor"
					>
					</u-count-down>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
	
</template>


<script>
import { CodeToState } from '@/conf'
export default{
	name:"competition",
	props:["cptt"],
	data(){
		// const time = new Date(this.cptt.overtime) - new Date();
		return{
			// time,
		}
	},
	created() {
		// console.log(this.cptt.state)
	},
	methods:{
		stateToType(e){
			if(!e)
				return 'error'
			return e===1? 'primary':'success'
		},
		stateToStr(e){
      return '查看'
      // console.log({e})
      // switch(e){
      //   case '1':return '查看';break;
      //   case '2':return '报名';break;
      //   case '3':return '报名';break;
      //   case '4':return '观看';break;
      //   case '5':return '查看';break;
      // }
		},
		seeDetails(){
			// if(!this.cptt.state)
			// 	return;//报名已截止
			// let url = this.cptt.state===1? "/pages/eventDetails/eventDetails"
			// 		: this.cptt.state? '/pages/watchGame/watchGame':'/'
			const url = '/pages/eventDetails/eventDetails'
			uni.showLoading({
				title: 'loading......',
				mask: true
			})
			setTimeout(()=>{
				uni.hideLoading()
				// console.log(this.cptt)//传递
				uni.navigateTo({
					url:url + '?id='+this.cptt.id,
					animationType: 'pop-in',
					animationDuration: 200,
				})
				//存session或者?k=v
			},500)
		}
	},
	computed:{
		timeColor(){
			return this.cptt.time>24*60*60? "#000":"#ff0000"
		}
	},
	
}
</script>

<style lang="scss" scoped>
	.competition
	{
		background-color: #eaeaea;
		border-radius: 20rpx;
		text-align: right;
		.cptt-main{
			display: flex;
			// flex-flow: row ;
			align-items:center;
			justify-content:space-between;
			margin-top: 5px;
			.left{
				.image {
					margin: 20rpx;
					height: 150rpx;
					width: 150rpx;
				}
			}
			.right{
				flex: 1;
				margin: 20rpx;
				.right-bom{
					position: relative;
					top: 20rpx;
				}
				.right-top{
					display: flex;
					align-items:center;
					justify-content:space-between;
					text-align: left;
					text{
						font-size: 35rpx;
						font-weight: 700;
					}
					.u-btn{
						flex-shrink:0;
						display: inline-block;
						margin: 0;
					}
				}
			}
		}
	}
</style>
